<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
<div class="main">
    <h1>IconFont 图标</h1>
    <ul class="icon_lists clear">

        <li>
            <i class="icon webim">&#x4b;</i>
            <div class="name">图片</div>
            <div class="code">&amp;#x4b;</div>
            <div class="fontclass">.K</div>
        </li>

        <li>
            <i class="icon webim">&#x44;</i>
            <div class="name">展开</div>
            <div class="code">&amp;#x44;</div>
            <div class="fontclass">.D</div>
        </li>

        <li>
            <i class="icon webim">&#x7a;</i>
            <div class="name">电话</div>
            <div class="code">&amp;#x7a;</div>
            <div class="fontclass">.z</div>
        </li>

        <li>
            <i class="icon webim">&#x69;</i>
            <div class="name">icon_音量</div>
            <div class="code">&amp;#x69;</div>
            <div class="fontclass">.i</div>
        </li>

        <li>
            <i class="icon webim">&#x41;</i>
            <div class="name">关闭</div>
            <div class="code">&amp;#x41;</div>
            <div class="fontclass">.A</div>
        </li>

        <li>
            <i class="icon webim">&#x4a;</i>
            <div class="name">表情</div>
            <div class="code">&amp;#x4a;</div>
            <div class="fontclass">.J</div>
        </li>

        <li>
            <i class="icon webim">&#x54;</i>
            <div class="name">删除</div>
            <div class="code">&amp;#x54;</div>
            <div class="fontclass">.T</div>
        </li>

        <li>
            <i class="icon webim">&#x64;</i>
            <div class="name">切换相机</div>
            <div class="code">&amp;#x64;</div>
            <div class="fontclass">.d</div>
        </li>

        <li>
            <i class="icon webim">&#x52;</i>
            <div class="name">视频</div>
            <div class="code">&amp;#x52;</div>
            <div class="fontclass">.R</div>
        </li>

        <li>
            <i class="icon webim">&#x43;</i>
            <div class="name">窗口 最小化</div>
            <div class="code">&amp;#x43;</div>
            <div class="fontclass">.C</div>
        </li>

        <li>
            <i class="icon webim">&#x6c;</i>
            <div class="name">摄像头</div>
            <div class="code">&amp;#x6c;</div>
            <div class="fontclass">.l</div>
        </li>

        <li>
            <i class="icon webim">&#x4c;</i>
            <div class="name">加</div>
            <div class="code">&amp;#x4c;</div>
            <div class="fontclass">.L</div>
        </li>

        <li>
            <i class="icon webim">&#x61;</i>
            <div class="name">视频</div>
            <div class="code">&amp;#x61;</div>
            <div class="fontclass">.a</div>
        </li>

        <li>
            <i class="icon webim">&#x55;</i>
            <div class="name">地理方位</div>
            <div class="code">&amp;#x55;</div>
            <div class="fontclass">.U</div>
        </li>

        <li>
            <i class="icon webim">&#x65;</i>
            <div class="name">mic-c</div>
            <div class="code">&amp;#x65;</div>
            <div class="fontclass">.e</div>
        </li>

        <li>
            <i class="icon webim">&#x46;</i>
            <div class="name">群组</div>
            <div class="code">&amp;#x46;</div>
            <div class="fontclass">.F</div>
        </li>

        <li>
            <i class="icon webim">&#x48;</i>
            <div class="name">arrow_l</div>
            <div class="code">&amp;#x48;</div>
            <div class="fontclass">.H</div>
        </li>

        <li>
            <i class="icon webim">&#x49;</i>
            <div class="name">arrow_r</div>
            <div class="code">&amp;#x49;</div>
            <div class="fontclass">.I</div>
        </li>

        <li>
            <i class="icon webim">&#x56;</i>
            <div class="name">logo</div>
            <div class="code">&amp;#x56;</div>
            <div class="fontclass">.V</div>
        </li>

        <li>
            <i class="icon webim">&#x6a;</i>
            <div class="name">感叹号</div>
            <div class="code">&amp;#x6a;</div>
            <div class="fontclass">.j</div>
        </li>

        <li>
            <i class="icon webim">&#x53;</i>
            <div class="name">文件</div>
            <div class="code">&amp;#x53;</div>
            <div class="fontclass">.S</div>
        </li>

        <li>
            <i class="icon webim">&#x62;</i>
            <div class="name">固定放大</div>
            <div class="code">&amp;#x62;</div>
            <div class="fontclass">.b</div>
        </li>

        <li>
            <i class="icon webim">&#x63;</i>
            <div class="name">固定缩小</div>
            <div class="code">&amp;#x63;</div>
            <div class="fontclass">.c</div>
        </li>

        <li>
            <i class="icon webim">&#x4f;</i>
            <div class="name">恶魔</div>
            <div class="code">&amp;#x4f;</div>
            <div class="fontclass">.O</div>
        </li>

        <li>
            <i class="icon webim">&#x6b;</i>
            <div class="name">圆感叹号</div>
            <div class="code">&amp;#x6b;</div>
            <div class="fontclass">.k</div>
        </li>

        <li>
            <i class="icon webim">&#x4d;</i>
            <div class="name">设置</div>
            <div class="code">&amp;#x4d;</div>
            <div class="fontclass">.M</div>
        </li>

        <li>
            <i class="icon webim">&#x50;</i>
            <div class="name">减</div>
            <div class="code">&amp;#x50;</div>
            <div class="fontclass">.P</div>
        </li>

        <li>
            <i class="icon webim">&#x57;</i>
            <div class="name">right</div>
            <div class="code">&amp;#x57;</div>
            <div class="fontclass">.W</div>
        </li>

        <li>
            <i class="icon webim">&#x45;</i>
            <div class="name">消息</div>
            <div class="code">&amp;#x45;</div>
            <div class="fontclass">.E</div>
        </li>

        <li>
            <i class="icon webim">&#x58;</i>
            <div class="name">hyphenate</div>
            <div class="code">&amp;#x58;</div>
            <div class="fontclass">.X</div>
        </li>

        <li>
            <i class="icon webim">&#x47;</i>
            <div class="name">搜索</div>
            <div class="code">&amp;#x47;</div>
            <div class="fontclass">.G</div>
        </li>

        <li>
            <i class="icon webim">&#x51;</i>
            <div class="name">退出</div>
            <div class="code">&amp;#x51;</div>
            <div class="fontclass">.Q</div>
        </li>

        <li>
            <i class="icon webim">&#x42;</i>
            <div class="name">最大化</div>
            <div class="code">&amp;#x42;</div>
            <div class="fontclass">.B</div>
        </li>

        <li>
            <i class="icon webim">&#x68;</i>
            <div class="name">iconfont-video2</div>
            <div class="code">&amp;#x68;</div>
            <div class="fontclass">.h</div>
        </li>

        <li>
            <i class="icon webim">&#x66;</i>
            <div class="name">iconfont-mic2</div>
            <div class="code">&amp;#x66;</div>
            <div class="fontclass">.f</div>
        </li>

        <li>
            <i class="icon webim">&#x6d;</i>
            <div class="name">iconfont-Volume2</div>
            <div class="code">&amp;#x6d;</div>
            <div class="fontclass">.m</div>
        </li>

        <li>
            <i class="icon webim">&#x4e;</i>
            <div class="name">聊天-群聊</div>
            <div class="code">&amp;#x4e;</div>
            <div class="fontclass">.L1</div>
        </li>

        <li>
            <i class="icon webim">&#x5a;</i>
            <div class="name">音乐</div>
            <div class="code">&amp;#x5a;</div>
            <div class="fontclass">.Z</div>
        </li>

    </ul>


    <div class="helps">
        第一步：使用font-face声明字体
        <pre>
@font-face {font-family: 'webim';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#webim') format('svg'); /* iOS 4.1- */
}
</pre>
        第二步：定义使用iconfont的样式
        <pre>
.webim{
    font-family:"webim" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
        第三步：挑选相应图标并获取字体编码，应用于页面
        <pre>
&lt;i class="webim"&gt;&amp;#x33;&lt;/i&gt;
</pre>
    </div>

</div>
</body>
</html>
